<template>
	<div class="tab-contanter b-r-1 animated fadeIn">
		<div class="tab-head text-14 text-black b-b-1">{{menuList.title}}</div>
		<div class="text-14 tab-info p-all-10">
			<span 
				@click="selectCardInfo(item, index)"
				v-for="(item, index) in menuList.list" 
				class="m-b-10"  
				:class="{'active': currentIndex == index}">
				{{item.priorityName}}
			</span>
		</div>
	</div>
</template>
<script>
	import { mapMutations,mapGetters } from 'vuex'
	import { DEFAUL_INDEX } from '@/utils/config.js'
	export default {
		data() {
			return {
				currentIndex: 0,
				adminList: [],
				menuList:[]
			}
		},
		created() {
			console.log(this.tabList)
			console.log(77777777)
			this._initSecondMenu(0)
			
		},
		methods: {
			_initSecondMenu(index) {
				let userMenu = sessionStorage.getItem('userMenu') ? JSON.parse(sessionStorage.getItem('userMenu')) : []
				let obj = {}
				let title = ''
				console.log(userMenu[index].priorityName)
				if(userMenu.length){
					switch(userMenu[index].priorityName) {
						case '车型':
							title = '车型管理'
							
							break;
						case '品类':
							title = '品类管理'
							break;
						case '商家':
							title = '商家管理'
							break;
						case '权限':
							title = '权限管理'
							break;
							
						
					}
					obj.title = title
					obj.list = userMenu[index].children
				}
				console.log(888888)
				console.log(obj)
				this.menuList = obj
			},
			/**
			 * @author yang
			 * @desc 点击二级菜单栏 获取当前对应的请求内容
			 */
			selectCardInfo(item, index) {
				console.log(item)
				console.log(this.tabList)
				console.log(this.secondDirectory)
				let attr = this.tabList.filter((element) => { return element.title === item.priorityName})
				console.log(attr)
				let list = this.tabList
				if(!attr.length) {
					list.push({title: item.priorityName, name: (index + DEFAUL_INDEX) + ''}),
					console.log(list.length+'长度');
					this.setTabList(list)
					this.currentIndex = index
					this.setTabCurrentIndex(this.currentIndex + DEFAUL_INDEX)
					console.log(this.tabList)
				}
				if(this.secondDirectory.list.length  === list.length) {
					this.setTabCurrentIndex(index + DEFAUL_INDEX)
				}else{
					this.setTabCurrentIndex(index + DEFAUL_INDEX)
				}
			},
			...mapMutations({
				setTabList: 'SET_TAB_LIST',
				setTabCurrentIndex: 'SET_TAB_CURRENT_INDEX'
			}),
		},
		watch: {
			'$route' (to, from) {
				let userMenu = sessionStorage.getItem('userMenu') ? JSON.parse(sessionStorage.getItem('userMenu')) : []
				userMenu.forEach((item, index) => {
					if(item.priorityName === to.meta.title) {
						this._initSecondMenu(index)
					}
				})
				
			},
			tabCurrentIndex(newVal, oldVal) {
				
				if(newVal != oldVal) {
					this.currentIndex = newVal - 1
				}
			}
		},
		computed: {
			...mapGetters([
				'tabList',
				'secondDirectory',
				'tabCurrentIndex'
			])
		}
		
	}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
   .tab-contanter{
		width: 150px;
		min-width: 150px;
		min-height: 100%;
		max-height: 100%;
		display: flex;
		flex-direction: column;
		.tab-head{
			width: 100%;
			height: 50px;
			text-align: center;
			line-height: 50px;
		}
		.tab-info{
			width: 100%;
			flex: 1;
			box-sizing: border-box;
			>span{
				width: 100%;
				height: 40px;
				transition: all 0.2s linear;
				line-height: 40px;
				display: block;
				cursor: pointer;
				text-align: center;
				border: 1px solid #ccc;
			}
			>span:hover{
				padding-right:10px;
				color: #409EFF;
			}
		}
		.active{
			color: #409EFF;
		}
	 }
</style>